<script setup lang="ts">
import { reactive, ref } from 'vue';
import { Search } from '@element-plus/icons-vue'
import type { PropType } from 'vue'
import type { MenuItem } from '../types/types.d.ts'
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()
router.afterEach((to,from)=>{
    if(to.fullPath.includes("/cate/")&&from.fullPath.includes("/cate/")&&to.fullPath!=from.fullPath) {
        router.go(0)
    }
})

const props = defineProps({
    data: {
        type: Array as PropType<MenuItem[]>,
        required: true
    }
})

const menuDatas = reactive(props.data);

const routerTo = (path: string) => {
    router.push(path)
}
</script>

<template>
    <div class="menu">
        <div class="menu-title" v-for="item in menuDatas" :key="item.id">
            <div class="text-bg">
                <el-text class="menu-cate font-xbs" style="font-size: 24px;line-height: 24px;height: 24px;">
                    <div  @click="routerTo(item.path)">{{ item.name }}</div>
                    <div v-if="item.cates != null" class="menu-more">
                        <el-icon>
                            <ArrowDown />
                        </el-icon>
                    </div>
                    <div class="menu-more-div">
                        <div v-for="citem in item.cates" :key="item.id" @click="router.push({ path: `/cate/${citem.id}` })" class="font-xbs cate-item-header">
                            <div class="cate-logo">
                                <el-image :src="citem.img" fit="cover" />
                            </div>
                            <div class="cate-title">
                                {{ citem.name }}
                            </div>
                        </div>
                    </div>
                </el-text>
            </div>
        </div>
        <div class="font-xbs text-search" @click="routerTo('/search')">
            搜索
        </div>
        <!-- <el-input v-model="keywords" placeholder="请输入关键词" style="width: 240px;" class="sbar" @click="routerTo('Search')">
            <template #append>
                <el-button :icon="Search" @click="routerTo('Search')" />
            </template>
        </el-input> -->
    </div>
</template>

<style>
.text-search {
    font-size: 24px;
    cursor: pointer;
    border-bottom: 1px solid #f59009;
    padding: 2px;
    /* border-radius: 1rem; */
}

.menu-title {
    cursor: pointer;
}

.cate-logo {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.cate-title {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 18px;
}

.cate-item-header {
    height: 45px;
    margin: 2px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 5px;
    border: 2px solid #ffffff00;
}

/* 丑的一批，之后再改 */
.cate-item-header:hover {
    border: 2px solid #f59009;
    border-radius: 0.8rem;
}

.menu-more-div {
    /* padding: 10px; */
    position: absolute;
    width: 160px;
    top: 25px;
    left: 55px;
    box-shadow:
    1.2px 1.3px 2.2px rgba(0, 0, 0, 0.02),
    2.8px 3.2px 5.3px rgba(0, 0, 0, 0.028),
    5.3px 6px 10px rgba(0, 0, 0, 0.035),
    9.4px 10.7px 17.9px rgba(0, 0, 0, 0.042),
    17.5px 20.1px 33.4px rgba(0, 0, 0, 0.05),
    42px 48px 80px rgba(0, 0, 0, 0.07);
    z-index: 999;
    background-color: white;
    border-radius: 5px;
    display: none;
}

.sbar {

    height: 40px;

    border-radius: 0.8rem;
    border: 1px solid #f59009;
    overflow: hidden;

    .el-input__wrapper {
        box-shadow: none;
    }

    .el-input__wrapper.is-focus {
        box-shadow: none;
    }

    .el-input-group__append {
        box-shadow: none;
        background-color: #f59009;
        color: white;
    }
}

.menu-more {
    cursor: pointer;
    margin-left: 5px;
}

.menu {
    width: 80%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 45px 0;
    /* z-index: 99999;
    background-color: white; */
}

.menu-cate {
    display: flex;
    position: relative;
    top: -4px;
    color: black !important;
}

.text-bg {
    height: 18px;
    background: linear-gradient(to right, #f59009, 20%, #ffffff 70%);
}

.menu-more:hover + .menu-more-div,
.menu-more-div:hover {
    display: block;
}
</style>